<template>
  <div>
    <div class="box">
      <img
        class="background"
        mode="scaleToFill"
        src="https://akk.028wkf.cn/kdb-weapp-img/mb1.png"
        alt
      />
    </div>
    <div class="kong"></div>
    <div class="btnBox">
      <div>
        <p>
          模板一
          <span>（免费试用）</span>
        </p>
        <div class="smallBtnBox">
          <button class="btn" @click="useBtn">使用</button>
          <button class="btn" @click="deployBtn">配置</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { UPDATE_SHOP_DECORATION_API, ADD_SHOP_DECORATION_API } from '@/api'

export default {
  components: {},
  data () {
    return {
      goodsTypeId: ''
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  onShow () {
    this.init()
  },
  created () {},
  methods: {
    useBtn () {
      const vm = this
      vm.$dialog('确定使用模板一').then(r => {
        if (vm.$cookie.get('isOne')) {
          vm._alterRequestAdd()
        } else {
          vm._alterRequest()
        }
      })
    }, // 使用按钮
    deployBtn () {
      this.$router.push(
        '/pages/shop-management/template-select/p1/main?val=' +
          this.$root.$mp.query.val +
          '&goodsTypeId=' +
          this.goodsTypeId
      )
    }, // 配置按钮
    _alterRequestAdd () {
      const vm = this
      let params = {
        template: vm.$root.$mp.query.val,
        shopId: vm.account.shopId
      }
      ADD_SHOP_DECORATION_API(params)
        .then(r => {
          if (r.data.code === '0' && r.data.data) {
            vm.$alert('选择模板一成功', '').then(() => {
              vm.$router.go(-1)
            })
          } else {
            vm.$toast('选择模板一失败，请稍后再试~~~')
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 确定的请求
    _alterRequest () {
      const vm = this
      let params = {
        template: vm.$root.$mp.query.val,
        shopId: vm.account.shopId
      }
      UPDATE_SHOP_DECORATION_API(params)
        .then(r => {
          if (r.data.code === '0' && r.data.data) {
            vm.$alert('选择模板一成功', '').then(() => {
              vm.$router.go(-1)
            })
          } else {
            vm.$toast('选择模板一失败，请稍后再试~~~')
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 确定的请求
    init () {
      this.goodsTypeId = this.$root.$mp.query.goodsTypeId
    }
  }
}
</script>

<style lang="scss">
.box {
  width: 100%;
  height: 100%;
  > .background {
    width: 100%;
    height: 100%;
  }
}
.kong {
  height: 50px;
}
.btnBox {
  width: 100%;
  background: #fff;
  position: fixed;
  bottom: 0;
  z-index: 6;
  div {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 340px;
    margin: auto;
    p {
      font-size: 14px;
      color: #000;
      span {
        color: #6882db;
      }
    }
    .smallBtnBox {
      width: 150px;
      display: flex;
      margin: 0;
      .btn {
        width: 70px;
        height: 30px;
        background: #ff9746;
        color: #fff;
        font-size: 14px;
        padding: 0;
        line-height: 30px;
        margin: 0;
      }
    }
  }
}
</style>
